<script setup>
import Table from '@/components/table/index.vue';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getListByPageAPI, delAPI } from '@/api/wedding/cashBackInfo';
import cashBackInfoLayer from './layer.vue';

/************************************定义变量************************************************/
//表格数据
const tableData = ref([]);
//表格loading
const loading = ref(false);
//选中的数据
const chooseData = ref([]);
//表格选中数据事件
const handleSelectionChange = (val) => {
  chooseData.value = val;
};
// 弹窗控制器
const layer = reactive({
  show: false,
  title: '新增',
  showButton: true,
});
// 存储搜索用的数据
const query = reactive({
  params: '',
});
// 分页参数, 供table使用
const page = reactive({
  index: 1,
  size: 20,
  total: 1,
});

/************************************定义弹窗************************************************/
// 新增弹窗功能
const handleAdd = () => {
  layer.title = '新增数据';
  layer.show = true;
  delete layer.row;
};
// 编辑弹窗功能
const handleEdit = (row) => {
  layer.title = '编辑数据';
  layer.row = row;
  layer.show = true;
};

/************************************定义事件************************************************/
// 批量删除功能
const handleDel = (data) => {
  let params = data.map((e) => {
    return e.id;
  });
  delAPI(params).then((res) => {
    ElMessage({
      type: 'success',
      message: '删除成功',
    });
    getTableData(true);
  });
};
// 搜索功能
const getTableData = (init) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = {
    current: page.index,
    pageSize: page.size,
    ...query,
  };
  getListByPageAPI(params)
    .then((res) => {
      tableData.value = res.data.list;
      page.total = Number(res.data.total);
    })
    .catch((error) => {
      tableData.value = [];
      page.index = 1;
      page.total = 0;
    })
    .finally(() => {
      loading.value = false;
    });
};

/************************************生命周期************************************************/
//获取表格数据
onMounted(() => {
  // 在组件挂载后执行的代码
  getTableData(true);
});
</script>

<template>
  <div class="layout-container">
    <div class="layout-container-form">
      <div class="layout-container-form-search">
        <el-form-item label="关键词：">
          <el-input v-model="query.params" />
        </el-form-item>
        <el-button type="primary" icon="Search" class="search-btn" @click="getTableData(true)">搜索</el-button>
      </div>

      <div class="layout-container-form-handle">
        <el-button type="primary" icon="CirclePlus" @click="handleAdd">新增</el-button>
        <el-popconfirm title="批量删除" @confirm="handleDel(chooseData)">
          <template #reference>
            <el-button type="danger" icon="Delete" :disabled="chooseData.length === 0">批量删除</el-button>
          </template>
        </el-popconfirm>
      </div>
    </div>
    <div class="layout-container-table">
      <Table ref="table" v-model:page="page" v-loading="loading" :showIndex="true" :showSelection="true"
        :data="tableData" @getTableData="getTableData" @selection-change="handleSelectionChange">
        <el-table-column prop="cashBack" label="返现比例" align="center" />
        <el-table-column prop="startNum" label="区间开始人数" align="center" />
        <el-table-column prop="endNum" label="区间结束人数" align="center" />
        <el-table-column prop="userName" label="创建人" align="center" />
        <el-table-column prop="createTime" label="创建时间" align="center" />
        <!--操作按钮-->
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)">编辑</el-button>
            <el-popconfirm title="删除" @confirm="handleDel([scope.row])">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </Table>
    </div>
    <cashBackInfoLayer :layer="layer" @getTableData="getTableData" v-if="layer.show" />
  </div>
</template>

<style lang="scss" scoped></style>
